<template>
  <div class="container-div">
    <el-collapse-transition>
      <el-row v-show="searchShow" class="search-collapse">
        <el-form ref="searchForm" :inline="true" :model="formSearch" style="height:39px" size="small">
          <el-form-item label="资源名称" prop="name">
            <el-input v-model.trim="formSearch.name" placeholder="资源名称" clearable/>
          </el-form-item>
          <el-form-item label="资源状态" prop="status">
            <el-select v-model="formSearch.status" placeholder="资源状态">
              <el-option label="所有" value=""/>
              <el-option
                v-for="item in dictOptions"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictValue"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round icon="el-icon-search" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="reset" round icon="el-icon-refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-collapse-transition>
    <el-row class="select-table">
      <el-row class="mb10">
        <el-col :span="20">
          <el-button v-permission="[&quot;system:resource:add&quot;]" type="primary" icon="el-icon-plus" size="small" @click="handleAddUpdate()">新增</el-button>
          <el-button v-permission="[&quot;system:resource:edit&quot;]" :disabled="isEditDisabled" type="warning" icon="el-icon-edit" size="small" @click="handleAddUpdate(mulSelection[0])">修改</el-button>
          <el-button v-permission="[&quot;system:resource:deletebatch&quot;]" :disabled="isDeleteDisabled" type="danger" icon="el-icon-delete" size="small" @click="handleBatchDelete">删除</el-button>
          <el-button :icon="expandAll ? 'el-icon-arrow-down' : 'el-icon-arrow-right'" type="success" size="small" @click="handlerFold">折叠/展开</el-button>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button icon="el-icon-search" size="small" @click="showSearch"/>
            <el-button icon="el-icon-refresh" size="small" @click="searchList"/>
            <el-dropdown :hide-on-click="false" trigger="click">
              <el-button icon="el-icon-tickets" size="small"/>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="bSortColShow">排序</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="bUrlColShow">请求地址</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="bMethodColShow">请求方式</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="bResourceTypeColShow">类型</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="bPermissionColShow">权限标识</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="bStatusColShow">状态</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="bToolColShow">操作</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button-group>
        </el-col>
      </el-row>
      <el-row>
        <tree-table
          v-loading="tabLoading"
          :data="dataList"
          :columns="columns"
          :eval-func="func"
          :expand-all="expandAll"
          @selection-change="handleSelectionChange">
          <el-table-column
            v-if="bSortColShow"
            prop="sort"
            label="排序"
            width="55"/>
          <el-table-column
            v-if="bUrlColShow"
            prop="url"
            label="请求地址"
            width="150"/>
          <el-table-column
            v-if="bMethodColShow"
            prop="method"
            label="请求方式"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.method === 'post'" class="badge badge-primary">{{ scope.row.method }}</span>
              <span v-if="scope.row.method === 'delete'" class="badge badge-danger">{{ scope.row.method }}</span>
              <span v-if="scope.row.method === 'put'||scope.row.method === 'patch'" class="badge badge-warning">{{ scope.row.method }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="bResourceTypeColShow"
            prop="resourceType"
            label="类型"
            width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.resourceType === 'MENU'" class="label label-primary">菜单</span>
              <span v-if="scope.row.resourceType === 'BUTTON'" class="label label-warning">按钮</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="bPermissionColShow"
            prop="permission"
            label="权限标识"
            width="180"/>
          <el-table-column
            v-if="bStatusColShow"
            prop="status"
            label="状态"
            width="150">
            <template slot-scope="scope">
              <span
                v-for="dictOption in dictOptions"
                v-if="scope.row.status===dictOption.dictValue"
                :key="dictOption.dictCode"
                :class="['badge',dictOption.listClass]">{{ dictOption.dictLabel }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="bToolColShow"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button v-permission="[&quot;system:resource:edit&quot;]" type="warning" icon="el-icon-edit" size="mini" circle @click="handleAddUpdate(scope.row)"/>
              <el-button v-permission="[&quot;system:resource:delete&quot;]" type="danger" icon="el-icon-delete" size="mini" circle @click="handleDelete(scope.row)"/>
            </template>
          </el-table-column>
        </tree-table>
      </el-row>
    </el-row>
    <!-- 部门设置 对话框 -->
    <addUpdate
      v-if="addUpdateFormVisible"
      ref="addUpdateDialog"
      @refreshDataList="searchList"/>
  </div>
</template>

<script>
import treeTable from '@/components/TreeTable'
import treeToArray from '@/components/TreeTable/eval'

import addUpdate from './add-update'

import { getDictLabel } from '@/utils'

import resultCode from '@/utils/resultCode'
import { getDictByType } from '@/api/dict'
import { getList, deleteOne, deleteBatch } from '@/api/resource'

import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数

// 表格动态错乱，可在el-table-column属性加上:key="Math.random()"
export default {
  name: 'Resource',
  components: { treeTable, addUpdate },
  directives: { permission },
  data() {
    return {
      func: treeToArray,
      expandAll: true,
      searchShow: true,
      isEditDisabled: true,
      isDeleteDisabled: true,
      bSortColShow: true,
      bStatusColShow: true,
      bMethodColShow: true,
      bToolColShow: true,
      bResourceTypeColShow: true,
      bPermissionColShow: true,
      bUrlColShow: true,
      tabLoading: false,
      dictOptions: [],
      formSearch: {
        name: null,
        status: null
      },
      dataList: [],
      columns: [
        {
          text: '资源名称',
          value: 'name',
          width: 250
        }
      ],
      mulSelection: [],
      addUpdateFormVisible: false
    }
  },
  created() {
    this.getDictList()
    this.searchList()
  },
  methods: {
    checkPermission,
    showSearch: function() {
      this.searchShow = !this.searchShow
    },
    getDictList: function() {
      getDictByType('sys_normal_disable').then(response => {
        const result = response.data// 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          this.dictOptions = result.data
          console.log('=========dictOptions=========')
          console.log(result.data)
        }
      })
    },
    searchList: function() {
      this.tabLoading = true
      // console.log('请求部门数据')
      getList(this.formSearch.name, this.formSearch.status).then(response => {
        const result = response.data// 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          console.log('=========datalist=========')
          console.log(result.data)
          this.dataList = result.data
        }
        this.tabLoading = false
      })
    },
    handleSelectionChange: function(val) {
      this.mulSelection = val
      console.log(this.mulSelection)
      console.log(val.length)

      if (this.mulSelection.length > 0) {
        this.isDeleteDisabled = false
        if (this.mulSelection.length == 1) {
          this.isEditDisabled = false
        } else {
          this.isEditDisabled = true
        }
      } else {
        this.isDeleteDisabled = true
        this.isEditDisabled = true
      }
    },
    onSubmit: function() {
      this.searchList()
    },
    reset: function() {
      this.$refs.searchForm.resetFields()
    },
    handleAddUpdate: function(row) {
      this.addUpdateFormVisible = true
      this.$nextTick(() => {
        this.$refs.addUpdateDialog.init(this.dictOptions, row)
      })
    },
    handleDelete: function(row) {
      this.$confirm('此操作将删除【' + row.name + '】资源以及子资源, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOne(row.id).then(response => {
          const result = response.data// 请求接口返回的内容
          if (result.code === resultCode.SUCCESS) {
            this.$message.success('删除成功')
            this.searchList()
          }
        })
      }).catch(() => {

      })
    },
    handleBatchDelete: function() {
      let names = ''
      const ids = []
      this.mulSelection.forEach(row => {
        names += row.name + ' '
        ids.push(row.id)
      })
      console.log(ids)
      const strIds = ids.join(',')
      console.log('ids=' + strIds)
      this.$confirm('此操作将删除【' + names + '】资源以及子资源, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatch(strIds).then(response => {
          const result = response.data// 请求接口返回的内容
          if (result.code === resultCode.SUCCESS) {
            this.$message.success('删除成功')
            this.searchList()
          }
        })
      }).catch(() => {

      })
    },
    handlerFold: function() {
      this.expandAll = !this.expandAll
      this.searchList()
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'status') {
          return getDictLabel(v[j], this.dictOptions)
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
